<template>
	<view :id="topNode">
		<!-- <view class="navArea">
			<uni-segmented-control :current="navCur" :values="navList" style-type="text" @clickItem="clickNav" />
		</view> -->
		<view v-if="navCur === 0" class="calcArea padding-bottom">
			<uni-group>
				<uni-forms ref="form" :model="incData" :border="true">
					<!-- <uni-forms-item label="计算方式">
						<uni-data-checkbox mode="tag" class="calcModeClass" :class="calcModeClass"
							v-model="incData.calcModeCur" :localdata="calcMode" @change="calcModeChange" />
					</uni-forms-item> -->
					<uni-forms-item>
						<template #label>
							<view class="w30">
								<uni-data-checkbox mode="tag" v-model="incData.calcModeCur" :localdata="moneyObj.mode"
									@change="moneyModeChange" />
							</view>
						</template>
						<uni-easyinput v-model="incData.money" type="digit" placeholder="请输入" :clearable="false"
							maxlength="9"><template #right>
								<view class="input_right_text">元</view>
							</template></uni-easyinput>
						<view class="grid align-center margin-top-sm" v-if="incData.calcModeCur == 0">
							<uni-tag v-for="(item, index) in moneyArr" :key="index" :text="item.text"
								@click="setValMoney(item.value)" :custom-style="secTagStyle" />
						</view>
					</uni-forms-item>
					<uni-forms-item>
						<template #label>
							<view class="w30">
								<uni-data-checkbox mode="tag" v-model="incData.percModeCur" :localdata="percObj.mode"
									@change="percModeChange" :selectedColor="mainColor" />
							</view>
						</template>
						<uni-easyinput v-model="incData.perc" type="digit" placeholder="请输入" :clearable="false"
							maxlength="6"><template #right>
								<view class="input_right_text">%</view>
							</template></uni-easyinput>
						<view class="grid align-center margin-top-sm mp-h64">
							<uni-tag v-for="(item, index) in percObj.arr" :key="index" :text="item + '%'"
								@click="setValPerc(item)" :custom-style="index < 4 ? mainTagStyle : secTagStyle" />
						</view>
					</uni-forms-item>
					<uni-forms-item :label="cntObj.title || '交易天数'" name="cnt">
						<slider :activeColor="mainColor" v-model="incData.cnt" @changing="cntChange" @change="cntChange"
							:min="cntObj.min" :max="cntObj.max" step="1" block-size="20" show-value />
						<view class="grid align-center margin-top-sm mp-h64">
							<uni-tag v-for="(item, index) in cntObj.arr" :key="index"
								:text="item > 0 ? '+'+item +'天' : '' + item + '天'" @click="setValCnt(item)"
								:custom-style="index < 4 ? mainTagStyle : secTagStyle" />
						</view>
					</uni-forms-item>
					<view v-show="incData.calcModeCur == 0">
						<uni-forms-item label="税费">
							<uni-data-checkbox mode="tag" class="calcModeClass taxModeClass" :class="calcModeClass"
								v-model="taxData.taxModeCur" :localdata="taxObj.taxMode" @change="taxModeChange" />
						</uni-forms-item>
						<view v-show="taxData.taxModeCur > 0">

							<uni-forms-item>
								<template #label>
									<view class="w30 flex flex-direction">
										<view class="label_main_text">印花税费率</view>
										<view class="label_sec_text">卖出收取</view>
										<view class="label_sec_text">最新千0.5</view>
									</view>
								</template>
								<uni-easyinput v-model="taxData.stamp" type="digit" maxlength="6" placeholder="请输入"
									:clearable="false"><template #left>
										<view class="input_right_text">千</view>
									</template><template #right>
										<view class="input_right_text">‰</view>
									</template></uni-easyinput>
								<view class="grid align-center margin-top-sm">
									<uni-tag v-for="(item, index) in taxObj.stampArr" :key="index" :text="'千' + item"
										@click="setValStamp(item)"
										:custom-style="index < 2 ? mainTagStyle : secTagStyle" />
								</view>
							</uni-forms-item>
							<uni-forms-item>
								<template #label>
									<view class="w30 flex flex-direction">
										<view class="label_main_text">佣金费率</view>
										<view class="label_sec_text">双向收取</view>
										<view class="label_sec_text">不得超过千三</view>
										<view class="label_sec_text">一般包括规费</view>
										<view class="label_sec_text">多数券商最低5元</view>
									</view>
								</template>
								<uni-easyinput v-model="taxData.commi" type="digit" maxlength="6" placeholder="请输入"
									:clearable="false">
									<template #left>
										<view class="input_right_text">万</view>
									</template>
									<template #right>
										<view class="grid align-center">
											<view class="input_right_checkbox"><uni-data-checkbox multiple :value="[5]"
													@change="minCommiChange"
													:localdata="taxObj.minCommiArr"></uni-data-checkbox></view>
											<view class="input_right_text">‱</view>
										</view>
									</template>
								</uni-easyinput>
								<view class="grid align-center margin-top-sm mp-h64">
									<uni-tag v-for="(item, index) in taxObj.commiArr" :key="index"
										:text="item < 10 ?'万' + item : '千' + (item/10)" @click="setValCommi(item)"
										:custom-style="index < 4 ? mainTagStyle : secTagStyle" />
								</view>
							</uni-forms-item>
							<uni-forms-item>
								<template #label>
									<view class="w30 flex flex-direction">
										<view class="label_main_text">过户费费率</view>
										<view class="label_sec_text">双向收取万0.1</view>
										<view class="label_sec_text">沪A北交所收取</view>
										<view class="label_sec_text">少数券商最低1元</view>
									</view>
								</template>
								<uni-easyinput v-model="taxData.trans" type="digit" maxlength="6" placeholder="请输入"
									:clearable="false">
									<template #left>
										<view class="input_right_text">万</view>
									</template>
									<template #right>
										<view class="grid align-center">
											<view class="input_right_checkbox"><uni-data-checkbox multiple
													@change="minTransChange"
													:localdata="taxObj.minTransArr"></uni-data-checkbox></view>
											<view class="input_right_text">‱</view>
										</view>
									</template>
								</uni-easyinput>
								<view class="grid align-center margin-top-sm">
									<uni-tag v-for="(item, index) in taxObj.transArr" :key="index" :text="'万' + item"
										@click="setValTrans(item)"
										:custom-style="index < 1 ? mainTagStyle : secTagStyle" />
								</view>
							</uni-forms-item>
						</view>
					</view>
				</uni-forms>
			</uni-group>
		</view>
		<view v-if="navCur === 1"><text class="content-text">税费计算</text></view>
		<view v-if="navCur === 2"><text class="content-text">网格交易</text></view>
		<!-- <view class="grid col-1">
			<view>
				<button class="w90 text-bold bg-main-color" type="primary" :style="[btnObj.style]"
					@click="calcing()">{{btnObj.text}}</button>
			</view>
		</view> -->
		<view class="grid col-2">
			<view>
				<button class="w90 text-bold bg-green" @click="shortCalc()">下跌计算</button>
			</view>
			<view>
				<button class="w90 text-bold bg-red" @click="longCalc()">上涨计算</button>
			</view>
		</view>
		<view class="w100 padding-top padding-bottom">
			<ad unit-id="adunit-ddc6bda79e138655" ad-type="video" ad-intervals="30" ad-theme="white" />
		</view>

		<view v-show="resultData.length > 0" :id="resultId">
			<view class="flex justify-center align-center margin-bottom">
				<view class="radius w100" :class="totalInc >= 0 ? 'bg-red' : 'bg-green'" style="height: 320upx;">
					<view class="text-center text-white flex justify-center align-center" style="height: 200upx;">
						<view>
							<uni-badge size="small" :text="'按'+incData.calcModeCurText" absolute="rightTop" :offset="[-25, 0]" type="primary">
							<view>
									<text v-if="incData.calcModeCur == 0"
										class="text-white text-xl lh-40">累计{{incData.percModeCur == 0 ? '上涨' : '下跌'}}</text>
										<text v-else
											class="text-white text-xl lh-40">最新股价</text>
							</view>
							</uni-badge>
							<view class="text-sl lh-100">
								{{incData.calcModeCur == 0 ? formatView(totalInc, 6, 1) : formatView(lastMoney, 6, 1)}}
								<text class="text-df">元</text>
							</view>
						</view>
					</view>
					<view class="grid col-3 justify-center align-center text-center text-df lh-40">
						<view>
							<view>持有天数</view>
							<view class="text-bold text-df">{{totalDay + '天'}}</view>
						</view>
						<view v-if="incData.calcModeCur == 0">
							<view>累计税费</view>
							<view class="text-bold text-df">{{formatView(totalTax, 6, 1)}}</view>
						</view>
						<view v-else>
							<view>累计{{incData.percModeCur == 0 ? '上涨' : '下跌'}}</view>
							<view class="text-bold text-df">{{formatView(totalInc, 6, 1)}}</view>
						</view>
						<view>
							<view>累计{{incData.percModeCur == 0 ? '涨幅' : '跌幅'}}</view>
							<view class="text-bold text-df" v-if="bigNumberGte(totalPerc, 100)">
								{{formatView(bigNumberDiv(totalPerc, 100), 6, 1)}}倍
							</view>
							<view class="text-bold text-df" v-else>{{formatView(totalPerc, 6, 1)}}%</view>
						</view>
					</view>
					<view class="grid col-3 justify-center align-center text-center text-xs lh-40">
						<view>
							<view v-if="totalDay != incData.cnt">
								{{incData.calcModeCurText}}小于{{incData.minMoney}}元停止计算
							</view>
						</view>
						<view>
							<view v-if="incData.calcModeCur == 0">
								您选择<text v-if="taxData.taxModeCur == 1">每日计算</text>
								<text v-else-if="taxData.taxModeCur == 2">计算一次</text>
								<text v-else>不计算</text>税费
							</view>
						</view>
						<view>
							<view v-if="bigNumberLte(totalPerc, -50)">
								涨{{formatView(upMult, 6, 1)}}倍回本
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="fixed bg-white">
				<view :class="incData.calcModeCur == 0 ? 'col-5' : 'col-4'" class="grid border-top border-bottom align-center text-center bg-f8 text-df lh-40">
					<view>
						<view class="text-bold">
							按{{incData.calcModeCurText}}计算</view>
					</view>
					<view>
						<view class="text-bold">{{incData.calcModeCurText}}</view>
						<view>{{formatView(incData.money, 4, 1)}}元</view>
					</view>
					<view>
						<view>
							<view class="text-bold">每日{{incData.percModeCur == 0 ? '上涨' : '下跌'}}</view>
							<view v-if="incData.percModeCur == 0" class="text-red">{{formatView(incData.perc, 4, 1)}}%
							</view>
							<view v-else class="text-green">-{{formatView(incData.perc, 4, 1)}}%</view>
						</view>
					</view>
					<view>
						<view>
							<view class="text-bold">交易天数</view>
							<view>{{incData.cnt}}天</view>
						</view>
					</view>
					<view v-if="incData.calcModeCur == 0">
						<view>
							<view class="text-bold">税费</view>
							<view v-if="taxData.taxModeCur == 1">每日计算</view>
							<view v-else-if="taxData.taxModeCur == 2">计算一次</view>
							<view v-else>不计算</view>
						</view>
					</view>
				</view>
				<view v-if="taxData.taxModeCur != 0"
					class="grid col-3 border-top border-bottom align-center text-center bg-f8 text-df lh-40">
					<view>
						<view class="text-bold">印花税</view>
						<view>千{{taxData.stamp}}</view>
					</view>
					<view>
						<view class="text-bold">佣金</view>
						<view>万{{taxData.commi}}最少{{taxData.minCommi}}元</view>
					</view>
					<view>
						<view class="text-bold">过户费</view>
						<view>万{{taxData.trans}}最少{{taxData.minTrans}}元</view>
					</view>
				</view>
				<view :class="incData.calcModeCur == 0 ? 'col-5' : 'col-4'"
					class="grid text-bold border-top border-bottom align-center text-center text-df bg-f8 lh-40">
					<view>
						<view @click="resultSort">
							<text>天数</text>
							<uni-icons type="up" color="#3072f6" v-show="isUp"></uni-icons>
							<uni-icons type="down" color="#3072f6" v-show="!isUp"></uni-icons>
						</view>
					</view>
					<view>
						<view>交易前{{incData.calcModeCurText}}</view>
						<view>交易后{{incData.calcModeCurText}}</view>
					</view>
					<view v-if="incData.calcModeCur == 0">
						<view>交易税费</view>
						<view>累计税费</view>
					</view>
					<view>
						<view>当日{{incData.percModeCur == 0 ? '涨幅' : '跌幅'}}</view>
						<view>累计{{incData.percModeCur == 0 ? '涨幅' : '跌幅'}}</view>
					</view>
					<view>
						<view>当日{{incData.percModeCur == 0 ? '上涨' : '下跌'}}</view>
						<view>累计{{incData.percModeCur == 0 ? '上涨' : '下跌'}}</view>
					</view>
				</view>
			</view>
			<view>
				<view :class="[incData.calcModeCur == 0 ? 'col-5' : 'col-4', index % 2 == 1 ? 'bg-f8' : '']" class="grid border-bottom align-center text-center result-row text-df lh-60"
					v-for="(item, index) in resultData" :key="index">
					<view v-if="item.mult >= 0">
						<view>第{{item.day}}天</view>
						<view v-if="bigNumberGt(item.mult, item.preMult) && bigNumberGt(item.mult, 1)"
							class="text-red text-bold text-xs">{{formatView(item.mult, 4, 1)}}倍</view>
					</view>
					<view v-else>
						<view>第{{item.day}}天</view>
						<view v-if="bigNumberGte(item.upMult, 1)" class="text-green text-bold text-xs">
							涨{{formatView(item.upMult, 4, 1)}}倍回本</view>
					</view>
					<view>
						<view>{{formatView(item.dayFirstMoney, 4, 1)}}</view>
						<view>{{formatView(item.dayMoney, 4, 1)}}</view>
					</view>
					<view v-if="incData.calcModeCur == 0">
						<view>{{formatView(item.dayTax, 4, 1)}}</view>
						<view>{{formatView(item.totalTax, 4, 1)}}</view>
					</view>
					<view>
						<view :class="bigNumberGte(item.dayPerc, 0) ? 'text-red' : 'text-green'">
							{{bigNumberGte(item.dayPerc, 1E6) ? formatView(item.dayPerc, 3, 1) : formatView(item.dayPerc, 4, 1)}}%
						</view>
						<view :class="bigNumberGte(item.totalPerc, 0) ? 'text-red' : 'text-green'">
							{{bigNumberGte(item.totalPerc, 1E6) ? formatView(item.totalPerc, 3, 1) : formatView(item.totalPerc, 4, 1)}}%
						</view>
					</view>
					<view>
						<view>{{formatView(item.dayInc, 4, 1)}}</view>
						<view>{{formatView(item.totalInc, 4, 1)}}</view>
					</view>
				</view>
			</view>

			<view v-show="showBackTop">
				<uni-fab ref="fab" :popMenu="false" :pattern="{'icon':'arrow-up'}" horizontal="right" vertical="bottom"
					@fabClick="backTop" />
			</view>
		</view>

		<view class="text-sm">
			<uni-load-more status="no-more" color="#999"
				:contentText="{ 'contentnomore': '已经到底了，即将触底反弹'}"></uni-load-more>

			<view class="grid col-1 align-center text-center padding-bottom-lg" style="color: #999;">
				<view>Copyright © cnbzzz@126.com</view>
				<view><uni-icons type="weixin" size="24upx" color="#999">zb766767</uni-icons></view>
				<view>欢迎吐槽~</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		Decimal
	} from '@/static/decimal.js'
	import {
		calcInc,
		toast,
		checkIncData,
		checkTaxData,
		calcTax,
		isMoney,
		simplifyNum,
		LONG_COLOR
	} from '@/static/util.js'

	export default {
		data() {
			return {
				mainColor: LONG_COLOR,
				navList: ['涨跌计算', '税费计算', '网格交易'],
				navCur: 0,
				calcModeClass: 'calcModeLongClass',
				moneyObj: {
					mode: [{
						text: '按本金',
						value: 0
					}, {
						text: '按股价',
						value: 1
					}]
				},
				moneyArr: [{
					text: '1千',
					value: 1E3
				}, {
					text: '1万',
					value: 1E4
				}, {
					text: '10万',
					value: 1E5
				}, {
					text: '100万',
					value: 1E6
				}, {
					text: '1亿',
					value: 1E8
				}],
				percObj: {
					mode: [{
						text: '每日上涨',
						value: 0
					}, {
						text: '每日下跌',
						value: 1
					}],
					arr: [5, 10, 20, 30, 0.25, 0.5, 0.75, 1]
				},
				btnObj: {
					style: {
						backgroundColor: LONG_COLOR
					},
					text: '上涨计算'
				},
				mainTagStyle: `background-color:${LONG_COLOR};border-width:0px;color:#ffffff;margin: 0 4px 4px 0;font-weight: 400;`,
				secTagStyle: 'border:1px solid #f0f0f0;background-color:#f5f5f5;color: #999999;margin: 0 4px 4px 0;font-weight: 400;',
				cntObj: {
					title: '交易天数',
					arr: [1, 5, 10, 20, -1, -5, -10, -20],
					min: 1,
					max: 242
				},
				incData: {
					money: 1E4,
					perc: 10,
					cnt: 100,
					calcModeCur: 0, //0按本金 1按股价
					calcModeCurText: "本金", //0按本金 1按股价
					percModeCur: 0, //0上涨 1下跌
					minMoney: 10, //小于多少停止计算
				},
				taxData: {
					taxModeCur: 0, //0不计算 1每日计算 2计算一次
					stamp: 0.5,
					commi: 2.5,
					minCommi: 5,
					trans: 0.1,
					minTrans: 0
				},
				taxObj: {
					taxMode: [{
						text: '计算一次',
						value: 2
					}, {
						text: '每日计算',
						value: 1
					}, {
						text: '不计算',
						value: 0
					}],
					stampArr: [0.5, 1, 0.25, 2],
					commiArr: [2.5, 2, 1, 0.85, 10, 15, 20, 30],
					transArr: [0.1, 0.2, 0.5],
					minCommiArr: [{
						'text': '最低5元',
						'value': 5
					}],
					minTransArr: [{
						'text': '最低1元',
						'value': 1
					}]
				},
				lastMoney: 0, //最新本金/股价
				totalInc: 0, //累计上涨/下跌
				totalPerc: 0, //总涨幅
				totalTax: 0, //总税费
				totalDay: 0, //总天数
				upMult: 0, //涨N倍回本
				resultId: "resultId",
				topNode: "topNode",
				resultData: [],
				isUp: false, //显示结果
				showBackTop: false, //显示回到顶部
				isWatchFormData: true, //不监听
			}
		},
		onShow() {},
		watch: {
			formDataChange: {
				handler(newVal, oldVal) {
					if (!this.isWatchFormData) {
						return
					}

					this.resultData = []
				},
				deep: true,
				immediate: false
			}
		},
		computed: {
			formDataChange() {
				let incData = JSON.parse(JSON.stringify(this.incData))
				let taxData = JSON.parse(JSON.stringify(this.taxData))
				return {
					incData,
					taxData
				}
			}
		},
		methods: {
			clickNav(e) {
				if (this.navCur !== e.currentIndex) {
					this.navCur = e.currentIndex
				}
			},
			moneyModeChange(e) {
				var val = e.detail.value
				this.incData.calcModeCur = val
				if (val == 1) {
					this.incData.money = 10
					this.incData.minMoney = 0.1
					this.incData.calcModeCurText = "股价"
					this.taxData.taxModeCur = 0
				} else {
					this.incData.money = 1E4
					this.incData.minMoney = 10
					this.incData.calcModeCurText = "本金"
				}
			},
			percModeChange(e) {
				var val = e.detail.value
				this.setPercModeCur(val)
			},
			setPercModeCur(val) {
				this.incData.percModeCur = val
				var longColor = this.globalColor.longColor
				var shortColor = this.globalColor.shortColor
				if (val == 0) { //是上涨
					this.mainColor = longColor
					this.mainTagStyle = this.mainTagStyle.replace(shortColor, longColor)
					this.btnObj.style.backgroundColor = longColor
					this.btnObj.text = '上涨计算'
					this.calcModeClass = 'calcModeLongClass'
				} else {
					this.mainColor = shortColor
					this.mainTagStyle = this.mainTagStyle.replace(longColor, shortColor)
					this.btnObj.style.backgroundColor = shortColor
					this.btnObj.text = '下跌计算'
					this.calcModeClass = 'calcModeShortClass'
				}
			},
			setValMoney(value) {
				if (value === undefined) {
					return
				}
				this.incData.money = value
			},
			setValPerc(value) {
				if (value === undefined) {
					return
				}
				this.incData.perc = value
			},
			setValCnt(value) {
				if (value === undefined) {
					return
				}
				var result = this.incData.cnt + value
				if (result < this.cntObj.min) {
					result = this.cntObj.min
				}
				if (result > this.cntObj.max) {
					result = this.cntObj.max
				}
				this.incData.cnt = result
			},
			cntChange(e) {
				var val = e && e.detail && e.detail.value
				if (val === undefined) {
					return
				}
				this.incData.cnt = val
			},
			//税费方法
			taxModeChange(e) {
				var val = e.detail.value
				this.taxData.taxModeCur = val
			},
			minCommiChange(e) {
				var val = e.detail.value
				if (Array.isArray(val) && val.length > 0) {
					this.taxData.minCommi = val[0]
				} else {
					this.taxData.minCommi = 0
				}
			},
			minTransChange(e) {
				var val = e.detail.value
				if (Array.isArray(val) && val.length > 0) {
					this.taxData.minTrans = val[0]
				} else {
					this.taxData.minTrans = 0
				}
			},
			setValCommi(value) {
				if (value === undefined) {
					return
				}
				this.taxData.commi = value
			},
			setValTrans(value) {
				if (value === undefined) {
					return
				}
				this.taxData.trans = value
			},
			setValStamp(value) {
				if (value === undefined) {
					return
				}
				this.taxData.stamp = value
			},
			longCalc() { //上涨
				this.setPercModeCur(0)
				this.calcing()
			},
			shortCalc() { //下跌
				this.setPercModeCur(1)
				this.calcing()
			},
			calcing() {
				this.isWatchFormData = false
				this.resultData = []

				let incData = this.incData
				let taxData = this.taxData
				if (checkIncData(incData) && checkTaxData(taxData)) {
					this.resultData = calcInc(incData, taxData)
					let arr = this.resultData
					let len = arr.length
					if (len < 1) {
						toast("未能计算出结果，请联系页面最下方作者", 5000)
						return;
					}

					let isUp = this.isUp
					let tmpTax = Decimal(0)

					let idx = len - 1 //升序取最后一条					
					if (!isUp) { //降序反转数据
						arr.reverse()
						idx = 0 //升序取第一条
					}

					this.lastMoney = arr[idx].dayMoney
					this.totalInc = arr[idx].totalInc
					this.totalPerc = arr[idx].totalPerc
					this.totalDay = arr[idx].day
					this.totalTax = arr[idx].totalTax
					this.upMult = arr[idx].upMult

					toast("计算完成，正在滚动到结果区域...", 500)
					this.showResult = true

					setTimeout(() => {
						uni.createSelectorQuery()
							.select('#' + this.resultId)
							.boundingClientRect((o) => {
								let resultTop = Math.round(o.top)

								uni.createSelectorQuery()
									.select('#' + this.topNode)
									.boundingClientRect((n) => {
										let topNodeTop = Math.round(n.top)
										let scrollTop = resultTop - topNodeTop
										uni.pageScrollTo({
											scrollTop: scrollTop,
											duration: 300
										})
									}).exec()
							}).exec()
						this.isWatchFormData = true
					}, 100)
				}
			},
			resultSort() {
				this.isUp = !this.isUp
				this.resultData.reverse()
			},
			formatView(number, dec, decType) {
				return simplifyNum(number, dec, decType)
			},
			bigNumberGt(a, b) {
				return Decimal(a).gt(Decimal(b))
			},
			bigNumberGte(a, b) {
				return Decimal(a).gte(Decimal(b))
			},
			bigNumberLt(a, b) {
				return Decimal(a).lt(Decimal(b))
			},
			bigNumberLte(a, b) {
				return Decimal(a).lte(Decimal(b))
			},
			bigNumberDiv(a, b) {
				return Decimal(a).div(Decimal(b))
			},
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			}
		},
		onPageScroll(e) {
			this.showBackTop = e.scrollTop > 500
		},
		onShareAppMessage(res) { //分享
			return {
				title: randomTitle(shareTitleArr),
				path: '/pages/index/index'
			}
		},
		onShareTimeline(res) { //分享
			return {
				title: randomTitle(shareTitleArr),
				path: '/pages/index/index'
			}
		}
	}

	const shareTitleArr = [
		'1万涨到1亿需要多少天?快来算一算',
		'8个涨停就能翻倍?别忘了还有税费!快来算一算',
		'长线交易和每日交易差别有多大?快来算一算',
		'每天涨1%一年后竟然能有这么多?快来算一算',
		'100个涨停能翻多少倍?快来算一算',
		'短线交易,别让税费吞噬你的利润!快来算一算',
		'算复利?算税费?算涨幅?算收益?快来算一算',
	]

	function randomTitle(arr) {
		return arr[Math.floor(Math.random() * arr.length)]
	}
</script>

<style lang="scss" scoped>
	.mp-h64 {
		// #ifndef H5
		height: 64px;
		// #endif
	}

	.label_main_text {
		font-weight: 700;
		color: #636363;
	}

	.label_sec_text {
		font-size: 10px;
		font-weight: 400;
		color: #999;
	}

	.input_right_text {
		width: 24px;
		margin: 0px 5px;
		color: $sec-font-color;
		text-align: center;
	}

	.input_right_checkbox /deep/ .checklist-box {
		margin: 0px !important;
		color: $sec-font-color;

		.checklist-text {
			color: $sec-font-color !important;
		}
	}

	.calcArea /deep/ uni-slider {
		margin-left: 0px !important;
		margin-right: 0px !important;
	}

	.calcArea /deep/ slider {
		margin-left: 0px !important;
		margin-right: 0px !important;
	}

	.calcArea /deep/ .uni-forms-item__label {
		font-weight: 700 !important;
		color: #636363 !important;
		width: 30% !important;
	}

	.calcModeClass /deep/ .checklist-group {
		justify-content: space-between !important;
	}

	.calcModeClass /deep/ .checklist-group .is--tag {
		width: 48% !important;
		margin-right: 0px !important;
	}

	.taxModeClass /deep/ .checklist-group .is--tag {
		width: 32% !important;
		margin-right: 0px !important;
	}

	.taxModeClass /deep/ .checklist-group .checklist-text {
		font-size: 24upx !important;
	}

	.calcModeClass /deep/ .checklist-group .checklist-content {
		justify-content: center !important;
		align-items: center !important;
	}

	.calcModeLongClass /deep/ .checklist-group .is-checked {
		background-color: $red-color !important;
	}

	.calcModeShortClass /deep/ .checklist-group .is-checked {
		background-color: $green-color !important;
	}

	.calcModeClass /deep/ .checklist-group .is-checked {
		font-weight: 700 !important;
		border-width: 0px !important;
	}

	.navArea /deep/ .segmented-control {
		background-color: #FFFFFF !important;
		height: 44px !important;
	}

	.navArea /deep/ .segmented-control__text {
		font-weight: 700 !important;
		font-size: 16px !important;
		color: $sec-font-color !important;
	}

	.navArea /deep/ .segmented-control__item--text {
		border-bottom-width: 4px !important;
		border-color: $main-color !important;
		font-weight: 700 !important;
		font-size: 18px !important;
		color: $main-font-color !important;

	}

	.fixed {
		position: sticky;
		top: 0px;
		width: 100%;
		left: 0px;
		z-index: 999;
		background-color: #fff;
	}

	.bg-f8 {
		background-color: #f8f8f8;
	}

	.bg-red {
		background-color: $red-color;
		color: #ffffff;
	}

	.bg-green {
		background-color: $green-color;
		color: #ffffff;
	}

	.text-red {
		color: $red-color;
	}

	.text-green {
		color: $green-color;
	}
</style>